<template>
	<div class="MapLayerInfo-Sz">
		<div class="point-content">
			<div class="title">
				<div class="text" :title="itemData.name">{{ itemData.name }}</div>
				<div class="status" :class="getStatusClass(itemData.status)">
					水情{{ itemData.status }}
				</div>
			</div>

			<div class="base-list">
				<div class="base-listDetail">所属区镇：
					<template v-if="itemData.area || itemData.town">
						<div v-if="itemData.area">{{ itemData.area }}</div>
						<div v-if="itemData.town">{{ itemData.town.label }}</div>
					</template>
					<div v-else>--</div>
				</div>
				<div class="base-listDetail">内江水位：{{ hasValidData(itemData.dataNum) ? itemData.dataNum : '--' }}</div>
				<div class="base-listDetail">外江水位：{{ hasValidData(itemData.dataNum1) ? itemData.dataNum1 : '--' }}</div>
				<div class="base-listDetail">水情时间：{{ itemData.dataTime || '--' }}</div>
				<div class="gq-listDetail">
					<div>工情情况：</div>
					<div v-if="itemData.__custom_detail && itemData.__custom_detail.length > 0" class="gate-detail">
						<div v-for="(item, index) in itemData.__custom_detail" :key="index" class="gate-item">
							<span>闸门{{ index + 1 }}#：{{ item['RUN_COND'] || '--' }}</span>
							<span class="gate-time">{{ item['TM'] }}</span>
							<span class="gate-status" :class="getGateStatusClass(item)">{{ getGateStatusText(item) }}</span>
						</div>
					</div>
					<div v-else>--</div>
				</div>
				<div class="video-listDetail">
					<div>视频情况：</div>
					<div v-if="itemData.__custom_videoDetail && itemData.__custom_videoDetail.length > 0" class="video-detail">
						<div v-for="(item, index) in itemData.__custom_videoDetail" :key="index" class="video-item">
							<span class="video-name" :title="item['DEVICENAME']">（{{ index + 1 }}）{{ item['DEVICENAME'] || '--' }}</span>
							<span class="video-status" :class="getVideoStatusClass(item)">{{ getVideoStatusText(item) }}</span>
						</div>
					</div>
					<div v-else>--</div>
				</div>
				<div class="base-listDetail">数据来源：{{ itemData.source || '--' }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { hasValidData } from 'common/js/utils';

export default {
	props: {
		itemData: {
			type: Object,
			default: () => ({}),
		}
	},
	created () {
		this.hasValidData = hasValidData
	},
	methods: {
		getStatusClass(status) {
			switch (status) {
				case '正常':
					return 'status-normal';
				case '缺失':
					return 'status-missing animated-point';
				default:
					return 'status-delay';
			}
		},
		getGateStatusClass(item) {
			if (item['RUN_COND'] === '离线') {
				return 'status-offline';
			} else if (item['TM']) {
				return 'status-normal';
			} else {
				return 'status-missing';
			}
		},
		getGateStatusText(item) {
			if (item['RUN_COND'] === '离线') {
				return '离线';
			} else if (item['TM']) {
				return '正常';
			} else {
				return '缺失';
			}
		},
		getVideoStatusClass(item) {
			return item['STATUS'] === 'ON' ? 'status-online' : 'status-offline';
		},
		getVideoStatusText(item) {
			return item['STATUS'] === 'ON' ? '在线' : '离线';
		}
	}
}
</script>

<style scoped lang="scss">
@import '@/common/scss/color.scss';

.MapLayerInfo-Sz {
	width: 320px;
	.point-content {
		padding: 5px 10px;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		border-radius: 10px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
		.title {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: 1px solid $Color-border;
			overflow: hidden;
			.text {
				flex: 1;
				font-size: 16px;
				font-weight: 600;
				color: $Color-text;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.status {
				text-align: center;
				padding: 2px 8px;
				border-radius: 12px;
				font-weight: 500;
				font-size: 12px;
			}
		
			.status-normal {
				flex: 0 0 66px;
				background-color: #e6ffed;
				color: $Color-success;
			}
			
			.status-missing {
				flex: 0 0 66px;
				background-color: #fff1f0;
				color: $Color-danger;
			}
			
			.status-delay {
				flex: 0 0 66px;
				background-color: #fff7e6;
				color: $Color-warning;
			}
		}
	}
	
	.base-list {
		.base-listDetail {
			display: flex;
			margin-bottom: 8px;
			font-size: 14px;
			color: $Color-text-secondary;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&:first-child {
				color: $Color-text;
				font-weight: 500;
			}
		}
		.gq-listDetail {
			margin-bottom: 8px;
			font-size: 14px;
			color: $Color-text-secondary;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&:first-child {
				color: $Color-text;
				font-weight: 500;
				flex: 0 0 80px;
			}
			.gate-detail {
				width: 100%;
				margin-top: 4px;
				.gate-item {
					display: flex;
					align-items: center;
					margin-bottom: 2px;
					font-size: 13px;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					span {
						margin-right: 5px;
						&:first-child {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						
						&.gate-time {
							flex: 1;
							text-align: center;
							color: $Color-text-secondary;
						}
						
						&.gate-status {
							flex: 0 0 40px;
							text-align: center;
							padding: 1px 4px;
							border-radius: 4px;
							font-size: 12px;
							
							&.status-normal {
								background-color: #e6ffed;
								color: $Color-success;
							}
							
							&.status-missing {
								background-color: #fff1f0;
								color: $Color-danger;
							}
							
							&.status-offline {
								background-color: #fff1f0;
								color: $Color-danger;
							}
						}
					}
				}
			}
		}
		
		.video-listDetail {
			display: flex;
			flex-direction: column;
			margin-bottom: 8px;
			font-size: 14px;
			color: $Color-text-secondary;
			
			.video-detail {
				width: 100%;
				margin-top: 4px;
				
				.video-item {
					display: flex;
					align-items: center;
					margin-bottom: 2px;
					font-size: 13px;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.video-name {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 5px;
					}
					
					.video-status {
						flex: 0 0 40px;
						text-align: center;
						padding: 1px 4px;
						border-radius: 4px;
						font-size: 12px;
						
						&.status-online {
							background-color: #e6ffed;
							color: $Color-success;
						}
						
						&.status-offline {
							background-color: #fff1f0;
							color: $Color-danger;
						}
					}
				}
			}
		}
	}
}
</style>